<template>
  <div class="toast">
    <i :class="getClass"></i>
    <span>{{ toastMsg }}</span>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      toastMsg: (state) => state.showToast.toastMsg,
      toastType: (state) => state.showToast.toastType,
    }),
    getClass() {
      if (this.toastType == "success") {
        return "iconfont icon-toast_chenggong";
      } else if (this.toastType == "danger") {
        return "iconfont icon-toast-shibai_huaban";
      } else if (this.toastType == "warning") {
        return "iconfont icon-toast-jinggao";
      }
      return "iconfont icon-toast-shibai_huaban";
    },
  },
};
</script>

 
<style lang = "less" scoped>
.toast {
  position: fixed;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border-radius: 10px;

  .iconfont {
    margin-right: 10px;
  }

  .icon-toast-shibai_huaban {
    color: red;
  }

  .icon-toast_chenggong {
    color: green;
  }

  .icon-toast-jinggao {
    color: orange;
  }
}
</style>


<style scoped>
/* 需求：封装一个提示框，方便所有组件使用，
（图标，提示内容都可能会变化）

例如：
登录Login.vue： 提示  登录成功
Header.vue；  提示  请先登录

实现步骤：
1. 提示框组件Toast.vue (样式）
    拷贝字体样式
    创建Toast.vue ，App.vue引入 查看！
2. 何时显示？v-show 动态控制它的显示和隐藏
   在vuex中存储了一个是否显示模态框的状态
   App.vue 中 使用v-show
3. 给Toast组件增加过渡效果
   <transition>组件 
4. 动态控制提示框组件的显示图标以及显示内容
   vuex中存储 提示类型和提示内容，
   toast.vue中获取vuex中数据显示

   优化修改方法，提供对msg和type修改
5. 处理自动关闭，将setTimeout放至actions内。
*/

/* 
   你是怎么样封装组件的？

   统一提示框样式，替换掉原生alert

   1.创建一个公共的Toast组件，完成基本布局
   2.在vuex中存储共享状态（是否显示，提示内容，提示类型），提供了显示提示框方法。
   3.使用transition内置组件实现过渡效果。
   4.使用actions对提示框实现自动关闭。
*/
</style>
